<template>
  <div>
    <div v-if="!errorFlag">
      <el-form
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="时间:">
          <el-radio-group
            v-model="queryForm.time"
            @change="timeChange"
          >
            <el-radio
              v-for="item in dateList"
              :key="item"
              :label="item"
            />
          </el-radio-group>
          <el-date-picker
            v-model="queryForm.value"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            @change="showTime"
          />
        </el-form-item>
        <el-button
          size="mini"
          type="primary"
          @click="queryModel"
        >查询</el-button>
      </el-form>
      <el-row>
        <el-col
          :span="4"
          style="background-color:#fafafa"
        >
          <el-button
            type="text"
            size="small"
            style="margin-left:50%"
            @click="clearChange"
          >清除所有选择</el-button>
          <el-form
            :inline="true"
            label-width="200px"
            label-position="left"
            style="padding:20px"
          >
            <el-form-item label="集群信息:">
              <!-- <el-radio-group v-model="setForm.cluster" style="display:flex;flex-flow:column nowrap;align-items:flex-start">
                        <el-radio v-for="item in clusterList" :label="item.value" @click.native.prevent="changeCluster(item.value)">{{item.label}}</el-radio>
                    </el-radio-group> -->
              <el-select
                v-model="setForm.cluster"
                placeholder="请选择集群"
                style="width:165px"
                clearable
              >
                <el-option
                  v-for="val in clusterList"
                  :key="val.value"
                  :label="val.label"
                  :value="val.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="模型名称:">
              <el-select
                v-model="setForm.modelNameList"
                placeholder="请选择模型"
                multiple
                style="width:165px"
              >
                <el-option
                  v-for="val in modelList"
                  :key="val"
                  :label="val"
                  :value="val"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="持续时间:">
              <el-radio-group
                v-model="setForm.elapsedTime"
                style="display:flex;flex-flow:column nowrap;align-items:flex-start"
              >
                <el-radio
                  v-for="item in continueList"
                  :key="item.value"
                  :label="item.value"
                  @click.native.prevent="changeElapsedTime(item.value)"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="已分配内存的秒数:">
              <el-radio-group
                v-model="setForm.allocatedMemorySeconds"
                style="display:flex;flex-flow:column nowrap;align-items:flex-start"
              >
                <el-radio
                  v-for="item in secondsList"
                  :key="item.value"
                  :label="item.value"
                  @click.native.prevent="changeMemorySeconds(item.value)"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="已分配 VCore 的秒数:">
              <el-radio-group
                v-model="setForm.allocatedVcoreSeconds"
                style="display:flex;flex-flow:column nowrap;align-items:flex-start"
              >
                <el-radio
                  v-for="item in vcoreList"
                  :key="item.value"
                  :label="item.value"
                  @click.native.prevent="changeVcoreSeconds(item.value)"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="写入的字节:">
              <el-radio-group
                v-model="setForm.bytesWritten"
                style="display:flex;flex-flow:column nowrap;align-items:flex-start"
              >
                <el-radio
                  v-for="item in byteList"
                  :key="item.value"
                  :label="item.value"
                  @click.native.prevent="changeWritten(item.value)"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="读取的文件字节:">
              <el-radio-group
                v-model="setForm.fileBytesRead"
                style="display:flex;flex-flow:column nowrap;align-items:flex-start"
              >
                <el-radio
                  v-for="item in readList"
                  :key="item.value"

                  :label="item.value"
                  @click.native.prevent="changeBytesRead(item.value)"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="时隙:">
              <el-radio-group
                v-model="setForm.slotsMillis"
                style="display:flex;flex-flow:column nowrap;align-items:flex-start"
              >
                <el-radio
                  v-for="item in millisList"
                  :key="item.value"

                  :label="item.value"
                  @click.native.prevent="changeMillis(item.value)"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="工作 CPU 时间:">
              <el-radio-group
                v-model="setForm.cmCpuMilliseconds"
                style="display:flex;flex-flow:column nowrap;align-items:flex-start"
              >
                <el-radio
                  v-for="item in cpuList"
                  :key="item.value"
                  :label="item.value"

                  @click.native.prevent="changeMilliseconds(item.value)"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col
          v-loading="queryFlag"
          :span="20"
        >
          <el-pagination
            align="center"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="margin-left:20%;position:relative"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <!-- <el-button
            v-if="tableList.length>0"
            size="mini"
            type="primary"
            style="position:absolute;top:0;left:90%"
            @click="loadData"
          >参数导出</el-button> -->
          <div
            v-for="(item,index) in tableList"
            :key="index"
            class="main"
          >
            <el-row>
              <el-col :span="3">
                <div class="title">{{ item.time }}</div>
                <div class="title">集群：<span style="color:#868687">{{ item.cluster }}</span></div>
                <div class="title">子集群：<span style="color:#868687">{{ item.childrenCluster }}</span></div>
              </el-col>
              <el-col :span="21">
                <div
                  style="font-size:14px;margin:10px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
                  class="sql"
                >
                  <i
                    v-if="!sqlFlag"
                    class="el-icon-arrow-right"
                    style="color:blue;font-size:18px"
                    @click="open(index)"
                  />
                  <i
                    v-if="sqlFlag"
                    class="el-icon-arrow-down"
                    style="color:blue;font-size:18px"
                    @click="off(index)"
                  />
                  {{ item.sql }}
                </div>
                <el-row>
                  <el-col
                    v-for="val in item.data"
                    :key="val.value"
                    :span="8"
                  >
                    <div class="box">
                      <div class="content1">{{ val.value }}</div>
                      <div class="content2">{{ val.key }}</div>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <div style="margin-left:85%">
              <el-button
                type="text"
                size="mini"
                @click="errorDetail(index)"
              >详情</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <errorData
      v-if="errorFlag"
      :detail-data="detailData"
      @server="server"
    />
  </div>
</template>
<script>
import audit from '@/api/phaseTwo/audit.js'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
import errorData from './indicators.vue'
export default {
  components: {errorData},
  data() {
    return {

      changeFlag: false,
      setForm: {
        cluster: '',
        elapsedTime: '',
        allocatedMemorySeconds: '',
        allocatedVcoreSeconds: '',
        bytesWritten: '',
        fileBytesRead: '',
        slotsMillis: '',
        cmCpuMilliseconds: '',
        modelNameList: []
      },
      dateList: ['30分钟', '1小时', '2小时', '6小时', '12小时', '1天', '7天'],
      tableList: [

      ],
      activeNames: '1',
      errorFlag: false,
      queryForm: {
        time: '30分钟',
        value: ''
      },
      cmList: [],
      clusterList: [],
      componentList: ['QUERY', 'DDL', 'DML', 'MAPREDUCE', 'SPARK', 'FLINK'],
      startTime: '',
      endTime: '',
      queryData: [],
      detailData: {},
      sqlFlag: false,
      continueList: [{label: '0-500ms', value: '0-500'}, {label: '500ms-1s', value: '500-1000'}, {label: '1s-5s', value: '1000-5000'}, {label: '5s-30s', value: '5000-30000'}, {label: '30s-1m', value: '30000-60000'}, {label: '1m-1h', value: '60000-3600000'}, {label: '1h-24h', value: '3600000-86400000'}],
      secondsList: [{label: '0-1K', value: '0-1000'}, {label: '1K-1M', value: '1000-1000000'}, {label: '1M-5M', value: '1000000-5000000'}, {label: '5M-500M', value: '5000000-500000000'}, {label: '500M-1G', value: '500000000-1000000000'}, {label: '1G-5G', value: '1000000000-5000000000'}],
      vcoreList: [{label: '0-1K', value: '0-1000'}, {label: '1K-1M', value: '1000-1000000'}, {label: '1M-5M', value: '1000000-5000000'}, {label: '5M-500M', value: '5000000-500000000'}, {label: '500M-1G', value: '500000000-1000000000'}],
      byteList: [{label: '0-30KB', value: '0-30'}, {label: '30KB-300KB', value: '30-300'}, {label: '300KB-3MB', value: '300-3072'}, {label: '3MB-300MB', value: '3072-307200'}, {label: '300MB-3GB', value: '307200-3145728'}],
      readList: [{label: '0-30KB', value: '0-30'}, {label: '30KB-300KB', value: '30-300'}, {label: '300KB-3MB', value: '300-3072'}, {label: '3MB-300MB', value: '3072-307200'}, {label: '300MB-3GB', value: '307200-3145728'}],
      millisList: [{label: '0-10s', value: '0-10000'}, {label: '10s-30s', value: '10000-30000'}, {label: '30s-1m', value: '30000-60000'}, {label: '1m-10m', value: '60000-600000'}, {label: '10m-1h', value: '600000-3600000'}],
      cpuList: [{label: '0-10s', value: '0-10000'}, {label: '10s-30s', value: '10000-30000'}, {label: '30s-1m', value: '30000-60000'}, {label: '1m-10m', value: '60000-600000'}, {label: '10m-1h', value: '600000-3600000'}, {label: '1h-24h', value: '3600000-86400000'}],
      pageIndex: 0, // 当前页码
      pageSize: 10, // 每页的数据条数
      total: null, // 每页的数据条数
      modelList: [],
      queryFlag: false,
      pickerOptions: {
        disabledDate(time) {
          const curDate = (new Date()).getTime()
          const three = 30 * 24 * 3600 * 1000
          const threeMonths = curDate - three
          return time.getTime() > Date.now() || time.getTime() < threeMonths
        }
      }
    }
  },
  watch: {

  },
  created() {
    this.getCluster()
    this.queryModel()
    this.getModelName()
  },
  mounted() {

  },
  methods: {
    errorDetail(index) {
      this.detailData = this.queryData[index ]
      this.errorFlag = true
    },
    changeClose() {
      this.changeFlag = false
    },
    handleClicks(data) {

    },
    server(val) {
      this.errorFlag = val
    },
    showTime() {
      this.queryForm.time = ''
      this.startTime = this.queryForm.value[0]
      this.endTime = this.queryForm.value[1]
    },
    timeChange() {
      this.queryForm.value = ''
      if (this.queryForm.time === '30分钟') {
        this.startTime = this.getTime(new Date() - 30 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      } else if (this.queryForm.time === '1小时') {
        this.startTime = this.getTime(new Date() - 60 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      } else if (this.queryForm.time === '2小时') {
        this.startTime = this.getTime(new Date() - 2 * 60 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      } else if (this.queryForm.time === '6小时') {
        this.startTime = this.getTime(new Date() - 6 * 60 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      } else if (this.queryForm.time === '12小时') {
        this.startTime = this.getTime(new Date() - 12 * 60 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      } else if (this.queryForm.time === '1天') {
        this.startTime = this.getTime(new Date() - 24 * 60 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      } else if (this.queryForm.time === '7天') {
        this.startTime = this.getTime(new Date() - 7 * 24 * 60 * 60 * 1000)
        this.endTime = this.getTime(new Date())
      }
    },
    getTime(time) {
      var date = new Date(time)
      const Y = date.getFullYear()
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      const h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours())
      const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
      const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
    },
    open(index) {
      const sql = document.getElementsByClassName('sql')
      sql[index].style.overflow = ''
      sql[index].style.textOverflow = ''
      sql[index].style.whiteSpace = ''
      this.sqlFlag = true
    },
    off(index) {
      let sql = sql = document.getElementsByClassName('sql')
      sql[index].style.overflow = 'hidden'
      sql[index].style.textOverflow = 'ellipsis'
      sql[index].style.whiteSpace = 'nowrap'
      this.sqlFlag = false
    },
    queryModel(resetPage = true) {
      if (resetPage) {
        this.pageIndex = 0
      }
      this.queryFlag = true
      if (this.queryForm.time !== '') {
        this.timeChange()
      }
      this.tableList = []
      const obj = {component: 'YARN', startTime: this.startTime, endTime: this.endTime, cmFlag: '', clusterFlag: '', elapsedTimeMin: null, elapsedTimeMax: null, allocatedMemorySecondsMin: null, allocatedMemorySecondsMax: null, allocatedVcoreSecondsMin: null, allocatedVcoreSecondsMax: null, bytesWrittenMin: null, bytesWrittenMax: null, fileBytesReadMin: null, fileBytesReadMax: null, slotsMillisMin: null, slotsMillisMax: null, cmCpuMillisecondsMin: null, cmCpuMillisecondsMax: null, modelNameList: this.setForm.modelNameList}
      // 判断是否为空
      if (this.setForm.cluster !== '') {
        obj.cmFlag = this.setForm.cluster.split(',')[1]
        obj.clusterFlag = this.setForm.cluster.split(',')[0]
      }
      if (this.setForm.elapsedTime !== '') {
        obj.elapsedTimeMin = this.setForm.elapsedTime.split('-')[0] * 1
        obj.elapsedTimeMax = this.setForm.elapsedTime.split('-')[1] * 1
      }
      if (this.setForm.allocatedMemorySeconds !== '') {
        obj.allocatedMemorySecondsMin = this.setForm.allocatedMemorySeconds.split('-')[0] * 1
        obj.allocatedMemorySecondsMax = this.setForm.allocatedMemorySeconds.split('-')[1] * 1
      }
      if (this.setForm.allocatedVcoreSeconds !== '') {
        obj.allocatedVcoreSecondsMin = this.setForm.allocatedVcoreSeconds.split('-')[0] * 1
        obj.allocatedVcoreSecondsMax = this.setForm.allocatedVcoreSeconds.split('-')[1] * 1
      }
      if (this.setForm.bytesWritten !== '') {
        obj.bytesWrittenMin = this.setForm.bytesWritten.split('-')[0] * 1
        obj.bytesWrittenMax = this.setForm.bytesWritten.split('-')[1] * 1
      }
      if (this.setForm.fileBytesRead !== '') {
        obj.fileBytesReadMin = this.setForm.fileBytesRead.split('-')[0] * 1
        obj.fileBytesReadMax = this.setForm.fileBytesRead.split('-')[1] * 1
      }
      if (this.setForm.slotsMillis !== '') {
        obj.slotsMillisMin = this.setForm.slotsMillis.split('-')[0] * 1
        obj.slotsMillisMax = this.setForm.slotsMillis.split('-')[1] * 1
      }
      if (this.setForm.cmCpuMilliseconds !== '') {
        obj.cmCpuMillisecondsMin = this.setForm.cmCpuMilliseconds.split('-')[0] * 1
        obj.cmCpuMillisecondsMax = this.setForm.cmCpuMilliseconds.split('-')[1] * 1
      }
      obj.pageIndex = this.pageIndex
      obj.pageSize = this.pageSize
      // 请求
      audit.anomalyModel(obj).then((res) => {
        this.queryData = res.content
        this.total = res.totalElements
        res.content.forEach((item) => {
          if (item.applicationType === 'MAPREDUCE') {
            const detail = JSON.parse(item.otherParameterData)
            const obj = {cluster: item.cmName, childrenCluster: item.clusterName, time: item.startTime + '--' + item.endTime, sql: item.name, data: [{value: '用户', key: item.user}, {value: '模型名称', key: item.modelName}, {value: 'ID', key: item.applicationId}, {value: '查询类型', key: item.applicationType}, {value: '持续时间', key: item.elapsedTime + 'ms'}, {value: 'CPU时间', key: detail.cpu_milliseconds}, {value: '时隙', key: detail.slots_millis}, {value: '读取的HDFS字节', key: detail.hdfs_bytes_read}, {value: '写入的文件字节', key: detail.file_bytes_written}, {value: '已分配VCore的秒数', key: item.allocatedVcoreSeconds}, {value: '已分配内存的秒数', key: item.allocatedMemorySeconds}, {value: '总任务', key: detail.total_launched_tasks}]}
            this.tableList.push(obj)
          } else if (item.applicationType === 'SPARK') {
            const detail = JSON.parse(item.otherParameterData)
            const obj = {cluster: item.cmName, childrenCluster: item.clusterName, time: item.startTime + '--' + item.endTime, sql: item.name, data: [{value: '用户', key: item.user}, {value: '模型名称', key: item.modelName}, {value: 'ID', key: item.applicationId}, {value: '查询类型', key: item.applicationType}, {value: '持续时间', key: item.elapsedTime}, {value: '已分配VCore的秒数', key: item.allocatedVcoreSeconds}, {value: '已分配内存的秒数', key: item.allocatedMemorySeconds}, {value: '已分配VCore数', key: detail.allocatedVCores}, {value: '已分配的内存', key: detail.allocatedMB}, {value: '正在运行的容器数', key: detail.runningContainers}]}
            this.tableList.push(obj)
          } else if (item.applicationType === 'Apache Flink') {
            const detail = JSON.parse(item.otherParameterData)
            const obj = {cluster: item.cmName, childrenCluster: item.clusterName, time: item.startTime + '--' + item.endTime, sql: item.name, data: [{value: '用户', key: item.user}, {value: '模型名称', key: item.modelName}, {value: 'ID', key: item.applicationId}, {value: '查询类型', key: item.applicationType}, {value: '持续时间', key: item.elapsedTime}, {value: '已分配VCore的秒数', key: item.allocatedVcoreSeconds}, {value: '已分配内存的秒数', key: item.allocatedMemorySeconds}, {value: '已分配VCore数', key: detail.allocatedVCores}, {value: '已分配的内存', key: detail.allocatedMB}, {value: '正在运行的容器数', key: detail.runningContainers}]}
            this.tableList.push(obj)
          }
        })
        this.queryFlag = false
      })
    },
    getCluster() {
      audit.getCluster().then((res) => {
        this.clusterList = []
        audit.getCluster().then((res) => {
          res.forEach((item) => {
            const obj = {label: item.concatName, value: item.clusterFlag + ',' + item.cmFlag}
            this.clusterList.push(obj)
          })
        })
      })
    },
    clearChange() {
      this.setForm = {
        cluster: '',
        elapsedTime: '',
        allocatedMemorySeconds: '',
        allocatedVcoreSeconds: '',
        bytesWritten: '',
        fileBytesRead: '',
        slotsMillis: '',
        cmCpuMilliseconds: '',
        modelNameList: []
      }
    },
    handleSizeChange(val) {
      this.pageIndex = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.pageIndex = val
      this.queryModel(false)
    },
    getModelName() {
      const formData = new FormData()
      formData.append('component', 'YARN')
      audit.getModelName(formData).then((res) => {
        this.modelList = res
      })
    },
    changeCluster(val) {
      val === this.setForm.cluster ? this.setForm.cluster = '' : this.setForm.cluster = val
    },
    changeElapsedTime(val) {
      val === this.setForm.elapsedTime ? this.setForm.elapsedTime = '' : this.setForm.elapsedTime = val
    },
    changeMemorySeconds(val) {
      val === this.setForm.allocatedMemorySeconds ? this.setForm.allocatedMemorySeconds = '' : this.setForm.allocatedMemorySeconds = val
    },
    changeVcoreSeconds(val) {
      val === this.setForm.allocatedVcoreSeconds ? this.setForm.allocatedVcoreSeconds = '' : this.setForm.allocatedVcoreSeconds = val
    },
    changeWritten(val) {
      val === this.setForm.bytesWritten ? this.setForm.bytesWritten = '' : this.setForm.bytesWritten = val
    },
    changeBytesRead(val) {
      val === this.setForm.fileBytesRead ? this.setForm.fileBytesRead = '' : this.setForm.fileBytesRead = val
    },
    changeMillis(val) {
      val === this.setForm.slotsMillis ? this.setForm.slotsMillis = '' : this.setForm.slotsMillis = val
    },
    changeMilliseconds(val) {
      val === this.setForm.cmCpuMilliseconds ? this.setForm.cmCpuMilliseconds = '' : this.setForm.cmCpuMilliseconds = val
    },
    // 下载数据
    loadData() {
      const obj = {component: 'YARN', startTime: this.startTime, endTime: this.endTime, cmFlag: '', clusterFlag: '', elapsedTimeMin: null, elapsedTimeMax: null, allocatedMemorySecondsMin: null, allocatedMemorySecondsMax: null, allocatedVcoreSecondsMin: null, allocatedVcoreSecondsMax: null, bytesWrittenMin: null, bytesWrittenMax: null, fileBytesReadMin: null, fileBytesReadMax: null, slotsMillisMin: null, slotsMillisMax: null, cmCpuMillisecondsMin: null, cmCpuMillisecondsMax: null, modelNameList: this.setForm.modelNameList}
      // 判断是否为空
      if (this.setForm.cluster !== '') {
        obj.cmFlag = this.setForm.cluster.split(',')[1]
        obj.clusterFlag = this.setForm.cluster.split(',')[0]
      }
      if (this.setForm.elapsedTime !== '') {
        obj.elapsedTimeMin = this.setForm.elapsedTime.split('-')[0] * 1
        obj.elapsedTimeMax = this.setForm.elapsedTime.split('-')[1] * 1
      }
      if (this.setForm.allocatedMemorySeconds !== '') {
        obj.allocatedMemorySecondsMin = this.setForm.allocatedMemorySeconds.split('-')[0] * 1
        obj.allocatedMemorySecondsMax = this.setForm.allocatedMemorySeconds.split('-')[1] * 1
      }
      if (this.setForm.allocatedVcoreSeconds !== '') {
        obj.allocatedVcoreSecondsMin = this.setForm.allocatedVcoreSeconds.split('-')[0] * 1
        obj.allocatedVcoreSecondsMax = this.setForm.allocatedVcoreSeconds.split('-')[1] * 1
      }
      if (this.setForm.bytesWritten !== '') {
        obj.bytesWrittenMin = this.setForm.bytesWritten.split('-')[0] * 1
        obj.bytesWrittenMax = this.setForm.bytesWritten.split('-')[1] * 1
      }
      if (this.setForm.fileBytesRead !== '') {
        obj.fileBytesReadMin = this.setForm.fileBytesRead.split('-')[0] * 1
        obj.fileBytesReadMax = this.setForm.fileBytesRead.split('-')[1] * 1
      }
      if (this.setForm.slotsMillis !== '') {
        obj.slotsMillisMin = this.setForm.slotsMillis.split('-')[0] * 1
        obj.slotsMillisMax = this.setForm.slotsMillis.split('-')[1] * 1
      }
      if (this.setForm.cmCpuMilliseconds !== '') {
        obj.cmCpuMillisecondsMin = this.setForm.cmCpuMilliseconds.split('-')[0] * 1
        obj.cmCpuMillisecondsMax = this.setForm.cmCpuMilliseconds.split('-')[1] * 1
      }
      audit.downLoad(obj).then((res) => {
        // 转换为工作簿
        const ws = XLSX.utils.aoa_to_sheet(res)
        const wb = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')

        // 保存为Excel文件并下载
        const filename = 'yarn查询语句.xlsx'
        const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })
        const blob = new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' })
        FileSaver.saveAs(blob, filename)
      })
    },
    s2ab(s) {
      const buf = new ArrayBuffer(s.length)
      const view = new Uint8Array(buf)
      for (let i = 0; i < s.length; i++) {
        view[i] = s.charCodeAt(i) & 0xff
      }
      return buf
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.box {
  width: 100%;
  height: 40px;
  display: flex;
  border-left: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;
}
.content1 {
  width: 40%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fafafa;
  border-right: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  color: #333;
  font-size: 12px;
}
.content2 {
  width: 60%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e9e9e9;
  color: #b0b0b2;
  font-size: 12px;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}
.main{
  padding: 8px;
  margin-bottom: 1rem;
  margin-top: 1rem;
  margin-left: 1rem;
  border:1px solid #dedede;
}
.title{
  font-size: 14px;
  text-align: center;
  margin-top:10px;
  color: #000;
}
::v-deep .el-radio{
    margin-right: 15px;
}
</style>
